<template>
  <el-dialog
    v-el-drag-dialog
    :title="'批量值班'"
    :visible.sync="visible"
    width="700px"
  >
    <div class="content">
      <div class="row-item">
        <div class="row-label">所属机构:</div>
        <div class="row-value">{{ form.orgName }}</div>
      </div>
      <div class="row-item">
        <div class="row-label">绑定司机:</div>
        <div class="row-value">{{ form.userName }}</div>
      </div>
      <div class="row-item2">
        <div class="row-label">绑定司机类型:</div>
        <div class="row-value">{{ form.userTypeDesc }}</div>
      </div>
      <div v-if="form.cartFlag === 2" class="row-item">
        <div class="row-label">配送员:</div>
        <div class="row-value">
          <el-select v-model="form.dutyDriverUserId" placeholder="请选择" style="width: 160px;">
            <el-option
              v-for="item in deliveryman"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </div>
      </div>
      <div v-else class="row-item">
        <div class="row-label">司机:</div>
        <div class="row-value">
          <el-select v-model="form.dutyDriverUserId" placeholder="请选择" style="width: 160px;">
            <el-option
              v-for="item in driverOption"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </div>
      </div>
      <div v-if="form.cartFlag === 1" class="row-item">
        <div class="row-label">押运员:</div>
        <div class="row-value">
          <el-select v-model="form.dutyEscortUserId" placeholder="请选择" style="width: 160px;">
            <el-option
              v-for="item in escortOption"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </div>
      </div>
      <div v-if="form.cartFlag === 1" class="row-item row-item3">
        <el-radio v-model="form.orderReceiver" :label="0">自动派单给大车司机</el-radio>
      </div>
      <div v-if="form.cartFlag === 1" class="row-item row-item3">
        <el-radio v-model="form.orderReceiver" :label="1">自动派单给押运员</el-radio>
      </div>
      <div class="row-item2">
        <div class="row-label">排班时间:</div>
        <div class="row-value">{{ yearMonth }}</div>
        <el-checkbox v-model="checkedAll" :disabled="allDisabled" :indeterminate="isIndeterminate" @change="handleCheckAll">全选</el-checkbox>
      </div>
      <div class="row-item2">
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="(item, index) in boxList" :key="index" :label="item.label" :disabled="item.disabled" />
        </el-checkbox-group>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { csDeliverUserList, cartSchedulingUpdate } from '@/api'
  import { parseTime } from '@/utils'
  export default {
    name: 'vehicleBatch',
    props: {
      parentFetchData: {
        type: Function
      }
    },
    data() {
      return {
        visible: false,
        driverOption: [],
        escortOption: [],
        deliveryman: [],
        form: {
          orgName: '',
          dutyDriverUserId: '',
          dutyEscortUserId: '',
          day: '',
          orderReceiver: 0,
          userTypeDesc: '',
          cartFlag: ''
        },
        checked1: true,
        checked2: false,
        yearMonth: '',
        checkedAll: false,
        isIndeterminate: true,
        allDisabled: false,
        boxList: [],
        checkList: []
      }
    },
    created() {
    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          this.days = temp.days
          this.yearMonth = temp.yearMonth
          this.currentRow = temp.currentRow
          console.log(temp)
          this.form = { ...temp.currentRow }
          if (!this.form.orderReceiver && this.form.orderReceiver !== 0) {
            this.$set(this.form, 'orderReceiver', 0)
          }
          this.boxList = []
          this.checkList = []
          this.checkedAll = false
          this.getUserOrder()
          this.createCheckBox()
          this.disableCheck()
        })
      },
      async getUserOrder() {
        const params = {
          deliveryOrgId: this.form.orgId || '',
          accountType: 1,
          utype: 65536 // 押运员
        }
        const params2 = {
          deliveryOrgId: this.form.orgId || '',
          accountType: 1,
          utype: 8388608 // 司机
        }
        const params3 = {
          deliveryOrgId: this.form.orgId || '',
          accountType: 1,
          utype: 32 // 配送员
        }
        const res = await csDeliverUserList(params)
        const res2 = await csDeliverUserList(params2)
        const res3 = await csDeliverUserList(params3)
        this.driverOption = res2.data
        this.escortOption = res.data
        this.deliveryman = res3.data
      },
      createCheckBox() {
        for (let i = 1; i <= this.days; i++) {
          this.boxList.push({
            label: i,
            disabled: false
          })
        }
        for (const key in this.currentRow) {
          if (key.indexOf('day') > -1 && this.currentRow[key]) {
            const day = parseInt(key.split('day')[1])
            console.log(day)
            this.checkList.push(this.boxList[day - 1].label)
          }
        }
        this.oldCheckList = JSON.parse(JSON.stringify(this.checkList))
      },
      handleCheckAll() {
        // 全选
        this.checkList = []
        if (!this.checkedAll) {
          this.disableList.forEach(item => {
            this.oldCheckList.forEach(item2 => {
              if (item.label === item2) {
                this.checkList.push(item2)
              }
            })
          })
        } else {
          this.checkList = this.activeList.map(item => item.label)
          this.disableList.forEach(item => {
            this.oldCheckList.forEach(item2 => {
              if (item.label === item2) {
                this.checkList.push(item2)
              }
            })
          })
        }
      },
      // 小于当前日期禁止勾选
      disableCheck() {
        const today = parseTime(new Date(), '{dd}')
        const nowYear = new Date().getFullYear()
        const nowMonth = new Date().getMonth() + 1
        const queryYear = this.yearMonth.split('-')[0]
        const queryMonth = this.yearMonth.split('-')[1]
        this.activeList = []
        this.disableList = []
        if (parseInt(queryYear) < parseInt(nowYear) || (parseInt(queryYear) === parseInt(nowYear) && parseInt(queryMonth) < parseInt(nowMonth))) {
          for (let i = 0; i < this.boxList.length; i++) {
            this.boxList[i].disabled = true
            this.allDisabled = true
          }
        } else if (parseInt(queryYear) === parseInt(nowYear) && parseInt(queryMonth) === parseInt(nowMonth)) {
          for (let i = 0; i < this.boxList.length; i++) {
            if (parseInt(i + 1) < parseInt(today)) {
              this.boxList[i].disabled = true
              this.allDisabled = true
            } else {
              this.boxList[i].disabled = false
              this.allDisabled = false
            }
          }
        } else if ((parseInt(queryYear) === parseInt(nowYear) && parseInt(queryMonth) > parseInt(nowMonth)) || parseInt(queryYear) > parseInt(nowYear)) {
          for (let i = 0; i < this.boxList.length; i++) {
            this.boxList[i].disabled = false
            this.allDisabled = false
          }
        }
        this.boxList.forEach((item) => {
          if (!item.disabled) {
            this.activeList.push(item)
          } else {
            this.disableList.push(item)
          }
        })
      },
      handleSave() {
        if (!this.form.dutyDriverUserId) {
          this.$message.warning('请选择司机')
          return
        }
        if (!this.form.dutyEscortUserId && this.form.cartFlag === 1) {
          this.$message.warning('请选择押运员')
          return
        }
        if (!this.form.orderReceiver && this.form.orderReceiver !== 0 && this.form.cartFlag === 1) {
          this.$message.warning('请勾选自动派单')
          return
        }
        const checkList = []
        for (let i = 0; i < this.checkList.length; i++) {
          let has = false
          for (let k = 0; k < this.disableList.length; k++) {
            if (this.checkList[i] === this.disableList[k].label) {
              has = true
            }
          }
          if (!has) {
            checkList.push(this.checkList[i])
          }
        }
        if (checkList.length === 0) {
          this.$message.warning('请选择排班时间')
          return
        }
        const schedulingTimeList = []
        checkList.forEach((item) => {
          if (item < 10) {
            schedulingTimeList.push(this.yearMonth + '-' + '0' + item)
          } else {
            schedulingTimeList.push(this.yearMonth + '-' + item)
          }
        })
        if (this.form.cartFlag === 2) {
          this.form.orderReceiver = 0
        }
        const param = {
          userId: this.form.userId,
          orgId: this.form.orgId,
          dutyDriverUserId: this.form.dutyDriverUserId,
          orderReceiver: this.form.orderReceiver,
          schedulingTimeList: schedulingTimeList
        }
        if (this.form.cartFlag === 1) {
          param.dutyEscortUserId = this.form.dutyEscortUserId
        }
        cartSchedulingUpdate(param).then(res => {
          if (res.data) {
            this.$message.success('排班成功')
            this.visible = false
            this.parentFetchData({})
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
    .content {
      display: flex;
      width: 100%;
      padding: 10px 20px;
      flex-wrap: wrap;
      .row-item {
        display: flex;
        width: 50%;
        margin-bottom: 20px;
        .row-label {
          width: 100px;
          height: 30px;
          line-height: 30px;
        }
        .row-value {
          width: 160px;
          height: 30px;
          line-height: 30px;
        }
      }
      .row-item2 {
        display: flex;
        width: 100%;
        margin-bottom: 20px;
        .row-label {
          width: 100px;
          height: 30px;
          line-height: 30px;
        }
        .row-value {
          height: 30px;
          margin-right: 20px;
          line-height: 30px;
        }
        /deep/.el-checkbox {
          width: 50px;
          line-height: 30px;
        }
      }
      .row-item3 {
        padding-left: 100px;
      }
    }
</style>

